<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>首页</title>
  <link rel="shortcut icon" href="../favicon/Async-favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./css/seat.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <script src="https://unpkg.com/axios@1.6.0/dist/axios.min.js"></script>
  <script src="../sweetalert/sweetalert-dev.js"></script>
  <link rel="stylesheet" href="../sweetalert/sweetalert.css">
</head>

<body>
  <div class="loader">
    <div class="scanner">
      <span>Loading...</span>
    </div>
  </div>

  <div class="header">
    <!-- 个人信息页面 -->
    <div class="top" onclick="openMenu()" id="top1">
      <div class="menu-icon" id="menuIcon">
        <i class="fa fa-bars fa-lg"></i>
      </div>
      <div class="menu-options main" id="menuOptions">
        <!-- 个人信息 -->
        <div class="user-info">
          <div class="user-info-title">
            <h3><i class="fa fa-user-circle fa-lg"></i>&nbsp;个人信息</h3>
          </div>
          <div class="user-info-content">
            <p>姓名：张三</p>
            <p>学号：2018302110111</p>
            <p>专业：软件工程</p>
            <p>班级：软件1801</p>
          </div>
        </div>
        <ul class="options">
          <!-- 修改个人信息 -->
          <li class="edit-info"><a href="#" onclick="openModal()"><i class="fa fa-edit fa-lg"></i>&nbsp;修改个人信息</a></li>
          <!-- 修改信息弹窗 -->
          <div id="myModal" class="modal">
            <div class="modal-content">
              <div class="close-icon">
                <h2>修改个人信息</h2><span class="close" onclick="closeModal()">&times;</span>
              </div>

              <form>
                <div class="input">
                  <label for="name">姓名:</label>
                  <input type="text" id="name" name="name">
                </div>

                <div class="input"><label for="studentID">学号:</label>
                  <input type="text" id="studentID" name="studentID">
                </div>

                <div class="input"><label for="major">专业:</label>
                  <input type="text" id="major" name="major">
                </div>

                <div class="input"><label for="class">班级:</label>
                  <input type="text" id="class" name="class">
                </div>
                <div class="input"><label for="email">邮箱:</label>
                  <input type="text" id="email" name="email">
                </div>

                <button type="button" onclick="saveChanges()">保存修改</button>
              </form>
            </div>
          </div>

          <!-- 重置密码 -->
          <li><a href="#" onclick="openPwd()"><i class="fa fa-key fa-lg"></i>&nbsp;重置密码</i></a></li>
          <div class="editPwd">
            <div class="editPwd-content">
              <h2>重置密码</h2>
              <!-- 关闭键 -->
              <span class="closePwd" onclick="closePwd()">&times;</span>
              <form>
                <div class="input inputPwd">
                  <label for="oldPwd">旧密码:</label>
                  <input type="password" id="oldPwd" name="oldPwd">
                </div>

                <div class="input inputPwd">
                  <label for="newPwd">新密码:</label>
                  <input type="password" id="newPwd" name="newPwd">
                </div>

                <div class="input inputPwd"><label for="confirmPwd">确认密码:</label>
                  <input type="password" id="confirmPwd" name="confirmPwd">
                </div>

                <button type="button" onclick="savePwd()">保存修改</button>
            </div>
          </div>
          <!-- 退出登录 -->
          <li><a href="#" onclick="logout()"><i class="fa fa-sign-out fa-lg"></i>&nbsp;退出登录</a></li>
        </ul>
      </div>



    </div>
    <!-- 主页页面 -->
    <div class="top">
      <div class="home" id="home">
        <i class="fa fa-home fa-lg"></i>
      </div>
    </div>

    <!-- 预约页面 -->
    <div class="top" onclick="reservationPage()">
      <div class="reserve" id="reserve">
        <i class="fa fa-wheelchair-alt fa-lg"></i>
      </div>
    </div>



  </div>
  <!-- container -->
  <div class="container">
    <!-- title -->
    <div class="title">
      <!-- welcome -->
      <div class="welcome-title">
        <h3>欢迎来到</h3>
        <h2>异步开发实验室座位预约系统</h2>
      </div>
      <div class="time-title">
        <p>欢迎每一个热爱开发的你~</p>
      </div>
    </div>
    <!-- 座位表 -->
    <div class="seat-screen main">
      <div class="seat-screen-title">
        <span> <i class="fa fa-user-times"></i>占用</span>
        <span><i class="fa fa-user-o"></i>当前用户</span>
        <span><i class="fa fa-user"></i>已预约</span>
      </div>
      <h3>座位表</h3>
      <div class="seat-chart">
        <ul class="row1">
          <li class="seat fa"></li>
          <li class="none"></li>
          <li class="seat fa"></li>
          <li class="seat fa"></li>
          <li class="seat fa"></li>
          <li class="seat fa"></li>
          <li class="seat fa"></li>
          <li class="seat fa"></li>
        </ul>
        <ul class="row2">
          <li class="seat fa"></li>
          <li class="none"></li>
          <li class="seat fa"></li>
          <li class="seat fa"></li>
          <li class="seat fa"></li>
          <li class="seat fa"></li>
          <li class="seat fa"></li>
          <li class="seat fa"></li>

        </ul>
        <ul class="row3">
          <li class="seat fa"></li>
          <li class="none"></li>
          <li class="none"></li>
          <li class="none"></li>
          <li class="none"></li>
          <li class="none"></li>
          <li class="none"></li>
          <li class="none"></li>
        </ul>
        <ul class="row4">
          <li class="seat fa"></li>
          <li class="seat fa"></li>
          <li class="seat fa"></li>
          <li class="seat fa"></li>
          <li class="seat fa"></li>
          <li class="seat fa"></li>
          <li class="seat fa"></li>
          <li class="seat fa"></li>
        </ul>
      </div>
    </div>

    <!-- 查看座位状态 -->
    <div class="seat-status main">
      <div class="seat-status-title">
        <h3>当前座位：</h3>
      </div>
      <div class="seat-status-content">
        <p>座位状态：</p>
        <p>开始时间：</p>
        <p>预约人：</p>
        <p>预约时长：</p>
      </div>
    </div>
  </div>

  <!-- footer -->
  <div class="footer">
    <div class="footer-title">
      <h3>Async-Lab</h3>
    </div>
    <div class="footer-content">
      <p>地址:信达楼(双A中心)B413</p>
      <a href="https://github.com/Async-Lab" target="_blank">实验室github地址</a></p>
    </div>
  </div>


  <script src="./js/editPwd.js"></script>
  <script src="./js/getUserInfoFromBack.js"></script>
  <script src="./js/checkSeatStatus.js"></script>
  <script src="./js/editUserInfo.js"></script>
  <script src="./js/logout.js"></script>
  <script src="./js/userinfoPopup.js"></script>
</body>

</html>